import React, {useEffect, useState} from 'react';
import store from '../../redux/store';
import {
    Box,
    Card,
    CardContent,
    CardHeader,
    IconButton,
    Paper,
    Stack,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Typography,
} from "@mui/material";

import {list} from "../../api/info/teacher";
import RichTextEditor from "../common/quill-rte";
import DescriptionIcon from "@mui/icons-material/Description";
import CircularProgress from "@mui/material/CircularProgress";

function Teacher() {

    const user = store.getState().auth?.user;
    const principal = user?.role === 'PRINCIPAL';

    const [teachers, setTeachers] = useState([]);
    const [entityId, setEntityId] = useState(0);
    const [title, setTitle] = useState('');
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (principal) {
            setLoading(true);
            list().then(data => {
                setTeachers(data);
                setLoading(false);
            });
        } else {
            setEntityId(user.id);
        }
    }, [principal, entityId, user, setTeachers]);

    return (<>
        {principal && entityId === 0 && (
            <Box p={4} display="flex" gap={4} alignItems="flex-start" flexWrap="wrap">
                <Card raised sx={{minWidth: '360px', padding: 2, boxSizing: 'border-box', width: '50%'}}>
                    <CardHeader title={
                        <Stack direction="row" alignItems="center" spacing={1}>
                            <Typography variant="h5">教师信息</Typography>
                            {loading && <CircularProgress color="inherit" size={24}/>}
                        </Stack>}/>
                    <CardContent>
                        <TableContainer component={Paper}>
                            <Table aria-label="simple table">
                                <TableHead>
                                    <TableRow>
                                        <TableCell width={'30px'}>ID</TableCell>
                                        <TableCell>名称</TableCell>
                                        <TableCell width={'40px'}>角色</TableCell>
                                        <TableCell width={'40px'} align={"center"}>操作</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {teachers.map(e => (
                                        <TableRow key={e.id}>
                                            <TableCell component="th" scope="row">{e.id}</TableCell>
                                            <TableCell>{e.name}</TableCell>
                                            <TableCell>{e.role === 'PRINCIPAL' ? '校长' : '教师'}</TableCell>
                                            <TableCell align="center">
                                                <IconButton size="small" onClick={() => {
                                                    setEntityId(e.id);
                                                    setTitle(e.name);
                                                }}>
                                                    <DescriptionIcon/>
                                                </IconButton>
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </TableContainer>
                    </CardContent>
                </Card>
            </Box>)}
        {entityId !== 0 &&
            <RichTextEditor cat={'TEACHER'} entityId={entityId} title={title}
                            back={principal ? (() => setEntityId(0)) : null}/>}
    </>);

}

export default Teacher;
